/**
 * Created by user on 2018/4/13.
 */
import React, { Component } from 'react'
import { connect } from 'react-redux'
import { Form, Icon, Input, Button, Checkbox } from 'antd'
const FormItem = Form.Item


class LoginForm extends React.Component {
  handleSubmit = (e) => {
    e.preventDefault()
    const { onSubmit } = this.props
    this.props.form.validateFields((err, values) => {
      if (!err) {
        onSubmit(values)
      }
    })
  }

  render() {
    const { getFieldDecorator } = this.props.form
    const { loading } = this.props
    return (
      <Form onSubmit={this.handleSubmit} className="login-form">
        <FormItem>
          {getFieldDecorator('username', {
            rules: [{ required: true, message: 'Please input your username!' }],
          })(
            <Input prefix={<Icon type="user" style={{ color: 'rgba(0,0,0,.25)' }} />} placeholder="Username" />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('password', {
            rules: [{ required: true, message: 'Please input your Password!' }],
          })(
            <Input prefix={<Icon type="lock" style={{ color: 'rgba(0,0,0,.25)' }} />} type="password" placeholder="Password" />
          )}
        </FormItem>
        <FormItem>
          {getFieldDecorator('remember', {
            valuePropName: 'checked',
            initialValue: true,
          })(
            <Checkbox>Remember me</Checkbox>
          )}
          <a className="login-form-forgot" href="javascript:void(0);">Forgot password</a>
          <Button type="primary" htmlType="submit" className="login-form-button" loading={loading}>
            Log in
          </Button>
          <div class="register_a">
            Or <a href="">register now!</a>
          </div>
        </FormItem>
      </Form>
    );
  }
}

const WrappedNormalLoginForm = Form.create()(LoginForm)
const mapState = (state) => {
  return {
    loading: state.LoginState.loading
  }
}

export default connect(mapState)(WrappedNormalLoginForm)
